<script setup>
  import {
    ref,
    reactive,
    onMounted
  } from 'vue'

  // 响应式状态(简单类型)
  const count = ref(0)
  let name = ref('boweifeng')

  // 响应式状态(对象类型)
  let stu = reactive({
    name: '王五',
    age: 50
  })

  // 用来修改状态、触发更新的函数
  function increment() {
    count.value++
  }

  function fn() {
    name.value = name.value.toUpperCase()
  }

  function fn2() {
    stu.name = '赵六';
    stu.age = 60;
  }

  // 生命周期钩子
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })
</script>

<template>
  <h1>{{name}}</h1>
  <button @click="increment">Count is: {{ count }}</button>
  <button @click="fn">toUpperCase</button>
  <hr />
  <h3>{{stu.name}},{{stu.age}}</h3>
  <button @click="fn2">修改</button>
</template>
